<template>
  <div>
    <!-- 
      表单元素属性：双向数据绑定
      单向：把数据 显示到 DOM元素
     -->
     <div>{{kw}}</div>

     <!-- 
      双向：表单元素 - 输入框，单选框，多选框，下拉框..
      这些元素 用户可以操作，可以修改其值
      -->

      <!-- 
        v-model：做了两件事
        1.kw变量的值 绑定在dom元素上
        2.当输入框的值被用户修改，同步更新到kw变量中
       -->
       <input type="text" v-model="kw" />
       <!-- 作用：把变量和输入框的值 实时绑定在一起，可以用来收集输入框的值 -->
       <table>
        <tbody>
          <tr>
            <td>用户名</td>
            <td><input type="text" v-model="uname"></td>
          </tr>
          <tr>
            <td>密码</td>
            <td><input type="text" v-model="upwd"></td>
          </tr>
          <tr>
            <td>邮箱</td>
            <td><input type="text" v-model="email"></td>
          </tr>
          <tr>
            <td>手机号</td>
            <td><input type="text" v-model="phone"></td>
          </tr>
          <tr>
            <td></td>
            <td><button @click="login">提交注册信息</button></td>
          </tr>
        </tbody>
       </table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        kw: '123456',
        // 设置4个变量, 和输入框双向绑定在一起
        uname: '',
        upwd: '',
        email: '',
        phone: '',
      }
    },
// -----------------------------------------------------------
  //  双向绑定：就是把变量和表单元素绑定在一起，可以实时收集表单元素的值
  methods: {
     login(){
      console.log(this.uname,this.upwd,this.email,this.phone);
    }
  },
  }
</script>

<style lang="scss" scoped>

</style>